<template>
  <div>
    <el-card>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple-dark">
            <el-button type="success" icon="el-icon-edit" @click="addItemdialogVisible = true">新增学科</el-button>
          </div>
        </el-col>
        <el-alert type="info" show-icon>
          <span>数据一共有{{ queryinFo.counts }}条</span>
        </el-alert>
        <el-table stripe style="width: 100%" :data="queryinFo.items">
          <el-table-column type="index" label="序号"> </el-table-column>
          <el-table-column prop="subjectName" label="学科名称" width="180"> </el-table-column>
          <el-table-column prop="username" label="创建者"> </el-table-column>
          <el-table-column prop="addDate" label="创建日期"> </el-table-column>
          <el-table-column label="前台是否显示">
            <template slot-scope="scope">
              <p v-if="scope.row.isFrontDisplay === 0">否</p>
              <p v-else>是</p>
            </template>
          </el-table-column>
          <el-table-column prop="twoLevelDirectory" label="二级目录"> </el-table-column>
          <el-table-column prop="totals" label="标签"> </el-table-column>
          <el-table-column prop="tags" label="题目数量"> </el-table-column>
          <el-table-column label="操作" width="180">
            <template slot-scope="scope">
              <a style="color: #409eff" @click="$router.push('/subjects/directorys')">目标</a>
              <a style="color: #409eff" @click="$router.push('/subjects/tags')">标签</a>
              <a style="color: #409eff" @click="modify(scope.row.id)">修改</a>
              <a style="color: #409eff" @click="removebj(scope.row.id)">删除</a>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryinFo.page"
        :page-sizes="[5, 10, 20, 50]"
        :pange-size="queryinFo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="queryinFo.counts"
      >
      </el-pagination>
    </el-card>
    <el-dialog ref="reference" title="修改学科" :visible.sync="dialogVisible" width="20%" @close="resetEditForm">
      <el-form label-width="80px" :rules="addForm" ref="editFormRef">
        <el-form-item label="学科名称">
          <el-input v-model="editForm.subjectName" prop="subjectName"></el-input>
        </el-form-item>
        是否显示：
        <el-switch v-model="spleady" @change="userStateChanged(spleady)"></el-switch>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="modifydiet">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="新增学科" :visible.sync="addItemdialogVisible" width="20%">
      <el-form label-width="80px" :model="querisy">
        <el-form-item label="学科名称">
          <el-input v-model="querisy.subjectName"></el-input>
        </el-form-item>
        是否显示：
        <el-switch v-model="playse" @change="addChange"></el-switch>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addItemdialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addedit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'subjects',
  data () {
    return {
      queryinFo: [],
      editForm: {},
      dialogVisible: false,
      addItemdialogVisible: false,
      spleady: '',
      playse: true,
      querisy: {
        subjectName: '',
        isFrontDisplay: 1
      },
      addForm: {
        subjectName: [
          { required: true, message: '请输入学科名称', trigger: 'blur' },
          {
            min: 1,
            max: 10,
            message: '学科名称长度不能小于0个',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  created () {
    this.getlist()
  },
  methods: {
    async getlist () {
      const { data: res } = await this.$http.get('/subjects')
      this.queryinFo = res
      console.log(this.queryinFo)
    },
    removebj (id) {
      this.$confirm('此操作将永久删除该学科, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const { data: res } = await this.$http.delete(`/subjects/${id}`)
        console.log(res)
        this.getlist()
        this.$message.success('删除成功')
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    async modify (id) {
      const { data: res } = await this.$http.get(`/subjects/${id}`)
      console.log(res)
      this.editForm = res
      console.log(this.editForm)
      // this.$message.success('修改学科成功')
      this.dialogVisible = true
      if (this.editForm.isFrontDisplay === 0) {
        this.spleady = false
      } else {
        this.spleady = true
      }
    },
    handleCurrentChange (val) {
      this.queryinFo.pages = val
      this.getlist()
    },
    handleSizeChange (val) {
      this.queryinFo.pagesize = val
      this.getlist()
    },
    resetEditForm () {
      this.$refs.editFormRef.resetFields()
      this.getlist()
    },
    userStateChanged (res) {
      console.log(res)
      res = !res
    },
    async modifydiet () {
      const res = await this.$http.put(`subjects/${this.editForm.id}`, this.editForm)
      if (res.status !== 200) return this.$message.error('获取数据失败')
      console.log(res)
      this.dialogVisible = false
      this.getlist()
      // this.$refs.editFormRef.validate(async bool => {
      //   // if (!bool) return
      //   const res = await this.$http.put(`subjects/${this.editForm.id}`, this.editForm)
      //   if (res.status !== 200) return this.$message.error('获取数据失败')
      //   console.log(res)
      //   this.dialogVisible = false
      //   this.getlist()
      // })
    },
    async addedit () {
      const res = await this.$http.post('subjects', this.querisy)
      this.addItemdialogVisible = false
      this.getlist()
      console.log(res)

      // this.$message.success('修改学科成功')
    },
    addChange () {
      console.log(this.playse)
      if (this.playse === true) {
        this.querisy.isFrontDisplay = 1
      } else if (this.playse === false) {
        this.querisy.isFrontDisplay = 0
      }
    }
  }
}
</script>

<style scoped lang="less">
.el-card__body {
  height: 100%;
  background-color: #fff;
  padding: 20px;
}
a {
  margin-right: 10px;
  font-size: 12px;
}
.grid-content > {
  float: right;
}
.el-alert--info {
  font-size: 12px;
  height: 35px;
}
</style>
